{% extends "base.html" %}
{% load i18n %}
{% load account %}
{% load bootstrap3 %}
{% load dv_filters %}

{% block head_title %}{% trans "Profil" %}{% endblock %}

{% block content %}
    <h2>{% if not userprofile %}{% trans "Nouvel utilisateur" %}
        {% else %}{% user_display userprofile %}
        {% endif %}</h2>
    {% if not userprofile %}
    <div class="alert alert-warning row" role="alert">
        <span class="col-xs-9">{% blocktrans %}Est-il certain que ce nouvel utilisateur n’existe pas déjà dans la base de données ?{% endblocktrans %}</span>
        {% include 'user_search_form.html' %}
    </div>
    {% endif %}
    <form method="POST" action="" class="form-horizontal">
        {% csrf_token %}
        {% if return_url %}
            <input type="hidden" name="returnUrl" value="{{ return_url }}" />
        {% endif %}
        {% if return_label %}
            <input type="hidden" name="returnLabel" value="{{ return_label }}" />
        {% endif %}
        <div>

        {% comment %}
        {# Pas pour l’instant #}
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#addr" aria-controls="coord" role="tab" data-toggle="tab">{% trans "Adresse" %}</a></li>
                <li role="presentation"><a href="#contacts" aria-controls="contacts" role="tab" data-toggle="tab">{% trans "Contacts" %}</a></li>
                <li role="presentation"><a href="#administrativia" aria-controls="administrativia" role="tab" data-toggle="tab">{% trans "Administratif" %}</a></li>
                <li role="presentation"><a href="#defi" aria-controls="defi" role="tab" data-toggle="tab">{% trans "Défi" %}</a></li>
                <li role="presentation"><a href="#cantons" aria-controls="cantons" role="tab" data-toggle="tab">{% trans "Cantons" %}</a></li>
                <li role="presentation"><a href="#notes" aria-controls="notes" role="tab" data-toggle="tab">{% trans "Notes" %}</a></li>
            </ul>
        {% endcomment %}

        <!-- Tab panes -->
        <div{% comment %} class="tab-content"{% endcomment %}>
            <div role="tabpanel" class="tab-pane active" id="addr">
                {% bootstrap_field form.first_name layout='horizontal' size='small' %}
                {% bootstrap_field form.last_name layout='horizontal' size='small' %}
                {% bootstrap_field form.language layout='horizontal' size='small' %}
                {% if form.languages_challenges %}
                  {% bootstrap_field form.languages_challenges layout='horizontal' size='small' %}
                {% endif %}
                {% if form.address_street %}
                  {% include "address_bootstrap_form.html" with has_additional=False %}
                {% endif %}
            </div>
            <div role="tabpanel" class="tab-pane" id="contacts">
                {% bootstrap_field form.natel layout='horizontal' size='small' %}
                {% bootstrap_field form.phone layout='horizontal' size='small' %}
                {% if form.email %}
                    {% bootstrap_field form.email layout='horizontal' size='small' %}
                {% endif %}
            </div>
            <div role="tabpanel" class="tab-pane" id="administrativia">
                {% if form.birthdate %}
                    {% bootstrap_field form.birthdate layout='horizontal' size='small' %}
                {% endif %}
                {% if form.nationality %}
                    {% bootstrap_field form.nationality layout='horizontal' size='small' %}
                {% endif %}
                {% if form.work_permit %}
                    {% bootstrap_field form.work_permit layout='horizontal' size='small' %}
                {% endif %}
                {% if form.tax_jurisdiction %}
                    {% bootstrap_field form.tax_jurisdiction layout='horizontal' size='small' %}
                {% endif %}
                {% if form.bank_name %}
                    {% bootstrap_field form.bank_name layout='horizontal' size='small' %}
                {% endif %}
                {% if form.iban %}
                    {% trans "CCP ?" as ccp %}
                    {% bootstrap_field form.iban layout='horizontal' size='small' addon_after=ccp %}
                {% endif %}
                {% if form.employee_code %}
                    {% bootstrap_field form.employee_code layout='horizontal' size='small' %}
                {% endif %}
                {% if form.social_security %}
                    {% bootstrap_field form.social_security layout='horizontal' size='small' %}
                {% endif %}
                {% if form.marital_status %}
                    {% bootstrap_field form.marital_status layout='horizontal' size='small' %}
                {% endif %}
            </div>

            <div role="tabpanel" class="tab-pane" id="defi">
                {% if form.status %}
                    {% bootstrap_field form.status layout='horizontal' size='small' %}
                {% endif %}
                {% if form.formation %}
                    {% bootstrap_field form.formation layout='horizontal' size='small' %}
                {% endif %}
                {% if form.formation_firstdate %}
                    {% bootstrap_field form.formation_firstdate layout='horizontal' size='small' %}
                {% endif %}
                {% if form.formation_lastdate %}
                    {% bootstrap_field form.formation_lastdate layout='horizontal' size='small' %}
                {% endif %}
                {% if form.actor_for %}
                    {% bootstrap_field form.actor_for layout='horizontal' size='small' %}
                {% endif %}
                {% if form.pedagogical_experience %}
                    {% bootstrap_field form.pedagogical_experience layout='horizontal' size='small' %}
                {% endif %}
                {% if form.firstmed_course %}
                <div class="form-group form-group-sm">
                    {% bootstrap_label form.firstmed_course.label label_class='col-md-3 control-label' %}
                    <div class="col-md-1">
                        <div class="checkbox">
                            <label for="id_firstmed_course">
                                <input {% if form.firstmed_course.value %}checked="checked" {% endif %}
                                       {% if form.firstmed_course.field.disabled %}disabled {% endif %}
                                       id="id_firstmed_course" name="firstmed_course" type="checkbox" />
                            </label>
                        </div>
                    </div>
                    {% bootstrap_field form.firstmed_course_comm field_class='col-md-8' form_group_class='none' show_label=False %}
                </div>
                {% endif %}
                {% if form.bagstatus %}
                    {% bootstrap_field form.bagstatus layout='horizontal' size='small' %}
                {% endif %}
            </div>
            <div role="tabpanel" class="tab-pane" id="cantons">
                {% if form.affiliation_canton %}
                    {% bootstrap_field form.affiliation_canton layout='horizontal' size='small' %}
                {% endif %}
                {% if form.activity_cantons %}
                    {% bootstrap_field form.activity_cantons layout='horizontal' size='small' %}
                {% endif %}
            </div>
            {% if request.user|can:'user_crud_dv_private_fields' %}
                <div role="tabpanel" class="tab-pane" id="notes">
                    {% bootstrap_field form.comments layout='horizontal' size='small' %}
                </div>
            {% endif %}
        </div>

        </div>

        {% buttons %}
            <button type="submit" class="btn btn-primary pull-right">{% if userprofile %}{% trans 'Update' %}{% else %}{% trans 'Créer' %}{% endif %}</button>
            {% if userprofile == request.user %}
                <a class="btn btn-default pull-right" href="{% url 'account_email' %}">{% blocktrans with email=request.user.email %}Changer d’email ({{ email }}){% endblocktrans %}</a>
            {% else %}
                <a class="btn btn-default" href="{% if return_url %}{{ return_url }}{% else %}{% url 'user-list' %}{% endif %}">{% trans "Annuler" %}</a>
            {% endif %}
        {% endbuttons %}
    </form>

{% endblock %}

{% block bootstrap3_extra_script %}
{{ form.media.js }}
<script type="text/javascript">
$(function () {
    $("#id_iban + span.input-group-addon").attr('data-toggle', 'tooltip')
                                      .attr('data-placement', 'right')
                                      .attr('title', window.defivelo.ibanTooltipTitle)
                                      .tooltip()
                                      .css('cursor', 'pointer')
                                      .click(function() {
                                         window.open(window.defivelo.ibanTooltipLink);
                                      });
})

function dvCantonsNotAffiliatedToMobile() {
    // Ne permet pas la coche dans le canton d’activité pour Défi Vélo Mobile
    homecanton = $( "#id_affiliation_canton" ).val();
    $( '#id_activity_cantons input[disabled]').prop("disabled", false);
    $( '#id_activity_cantons input[value="' + homecanton + '"]').prop("disabled", true);
}

function dvLanguagesCannotBeMain() {
    // Ne permet pas la coche dans le canton d’activité pour Défi Vélo Mobile
    mainlanguage = $( "#id_language" ).val();
    $( '#id_languages_challenges input[disabled]').prop("disabled", false).prop('checked', false);
    $( '#id_languages_challenges input[value="' + mainlanguage + '"]').prop("disabled", true).prop('checked', true);
}

function noWorkPermitForSwiss() {
    is_swiss = ($('#id_nationality').val() == 'CH');
    $( '#id_work_permit' ).prop('disabled', is_swiss);
//     $( '#id_tax_jurisdiction' ).prop('disabled', is_swiss);
}

$( "#id_affiliation_canton" ).change( dvCantonsNotAffiliatedToMobile );
$( "#id_language" ).change( dvLanguagesCannotBeMain );
$( '#id_nationality' ).change( noWorkPermitForSwiss );

dvCantonsNotAffiliatedToMobile();
dvLanguagesCannotBeMain();
noWorkPermitForSwiss();
</script>
{% include 'snippets/datetimepicker_js.html' %}
{% endblock %}

{% block body_end %}
  <script>
    window.defivelo = window.defivelo || {};

    {% trans "Vers le calculateur d’IBAN" as toiban %}
    window.defivelo.ibanTooltipTitle = '{{ toiban|escapejs }}';
    {% trans 'https://www.postfinance.ch/fr/particuliers/assistance/outils-calculateurs/calculateur-iban.html' as toibanlink %}
    window.defivelo.ibanTooltipLink = '{{ toibanlink|escapejs }}';
  </script>
{% endblock %}
